<script setup>
	import { computed, ref } from 'vue'
	import { evaluateDoctorApi } from '@/services/doctor.js'

	const props = defineProps({
		orderId: String,
		doctorId: String,
		score: {
			type: Number,
			default: 0,
		},
		content: {
			type: String,
			default: '',
		},
		hasEvaluate: {
			type: Boolean,
			default: '',
		},
	})
	const formData = ref({
		content: props.content,
		anonymousFlag: 0,
		score: props.score,
	})
	const hasEvaluate = ref(props.hasEvaluate)
	const disabled = computed(
		() => formData.value.score < 1 || !formData.value.content
	)
	const wordCount = computed(() => formData.value.content?.length || 0)
	async function sumbit() {
		const { code, message, data } = await evaluateDoctorApi({
			docId: props.doctorId,
			orderId: props.orderId,
			...formData.value,
		})
		// 检测接口是否调用成功
		if (code !== 10000) return uni.utils.toast(message)

		uni.utils.toast('感谢您的评价！')
		// 标记已经评价过
		hasEvaluate.value = true
	}
</script>
<template>
	<view class="rate-page">
		<view class="title"> 医生服务评价 </view>
		<view class="subtitle">本次在线问诊服务您还满意吗？ </view>
		<view class="rating">
			<uni-rate v-model="formData.score" margin="20" />
		</view>
		<view class="content">
			<uni-easyinput
				class="input"
				type="textarea"
				v-model="formData.content"
				:input-border="false"
				:clearable="false"
				:styles="{ backgroundColor: '#f6f6f6' }"
				placeholder="请描述您对医生的评价或是在医生看诊过程中遇到的问题"
				placeholder-style="font-size: 30rpx; color: #979797"
			/>
			<text class="word-count">{{ wordCount }}/150</text>
		</view>
		<view class="anonymous" v-if="!hasEvaluate">
			<view
				@click="formData.anonymousFlag = Math.abs(formData.anonymousFlag - 1)"
				class="icon"
			>
				<uni-icons
					v-if="formData.anonymousFlag"
					size="20"
					color="#16C2A3"
					type="checkbox-filled"
				/>
				<uni-icons v-else size="20" color="#d1d1d1" type="circle" />
			</view>
			<text>匿名评价</text>
		</view>
		<button
			v-if="!hasEvaluate"
			class="uni-button"
			@click="sumbit"
			:disabled="disabled"
		>
			提交
		</button>
	</view>
</template>

<style lang="scss">
	.rate-page {
		margin-top: 60rpx;
		padding: 30rpx;
		background-color: #fff;
		border-radius: 30rpx;
		.title {
			text-align: center;
			line-height: 2;
		}
		.subtitle {
			text-align: center;
			color: #6f6f6f;
			font-size: 26rpx;
			line-height: 2;
		}
		.rating {
			display: flex;
			justify-content: center;
			margin: 20rpx 0;
		}
		.content {
			margin: 20rpx 0;
			position: relative;
			.input {
				width: 100%;
				height: 240rpx;
				box-sizing: border-box;
				background-color: #f6f6f6;
				border-radius: 20rpx;
				padding: 20rpx;
			}
			.word-count {
				position: absolute;
				bottom: 10rpx;
				right: 10rpx;
				color: #6f6f6f;
				font-size: 26rpx;
			}
		}
		.anonymous {
			display: flex;
			justify-content: center;
			margin: 20rpx 0;
			align-items: center;
			.icon {
				margin-right: 10rpx;
			}
			text {
				color: #6f6f6f;
				font-size: 26rpx;
			}
		}
	}
</style>
